<template>
  <el-card class="tree-card">
    <!-- 用了一个行列布局 -->
    <tools :terr-data="company" :is-root="true" @addDept="addDepts" />
    <hr>
    <el-tree

      :data="dataList"
      :props="{label: 'name'}"
      :default-expand-all="true"
    >
      >
      <template #default="scoped">
        <tools :terr-data="scoped.data" :is-root="false" @Deldepartment="getdepartment" @addDept="addDepts" @editDepattment="editDepattment" />
      </template>
    </el-tree>
    <addDept ref="refedit" :dialog-visible.sync="dialogVisible" :node-data="nodeData" @updata="getdepartment" />
  </el-card>

</template>

<script>
import tools from './components/tools.vue'
import { department } from '@/api/department'
import recursion from '@/utils/recursion'
import addDept from './components/add-dept.vue'
export default {
  components: {
    tools, addDept
  },
  data() {
    return {
      dataList: [],
      company: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        id: ''
      },
      dialogVisible: false,
      nodeData: {}
    }
  },
  async created() {
    this.getdepartment()
  },
  methods: {
    async getdepartment() {
      const res = (await department()).depts
      res.forEach(item => {
        item.children = []
      })
      this.dataList = recursion(res, '')
    },
    addDepts(data) {
      this.nodeData = data
      this.dialogVisible = true
    },
    editDepattment(data) {
      // 调用子组件的方法
      this.$refs.refedit.ByIdgetdepartment(data.id)
      this.nodeData = data
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss">
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
</style>
